<div class="video-box"
    *ngIf="videoContainer as vc;"
    [id]="'video-box_'+vc.ownerId">

    <div *ngIf="vc.user">

    <div #videoBox
        [id]="'video_'+vc.participantId"
        class="video-wrapper drag-box"
        [class.SMALL]="isSmall() "
        [class.actived]="isActived()"
        [ngClass]="vc.status"
        [width]="rWidth" [height]="rHeight"

        ngResizable

        [disableResize]="!isActived()"
        [directions]="['bottom-right','bottom', 'right']"
        [minWidth]="mWidth" [minHeight]="mHeight"
        (resizeInit)="resizeInit($event)"
        (resizeStart)="resizeStart($event)"
        (resizing)="resizing($event)"
        (resizeEnd)="resizeEnd($event)"

            cdkDrag
            cdkDragBoundary="#page-workbench"
            [cdkDragDisabled]="!isActived()"
            (cdkDragStarted)="dragStarted($event)"
            (cdkDragEnded)="dragEnded($event)"
            (cdkDragMoved)="dragMoved($event)"
            (click)="onSelect(!vc.active)"
            [class.active]="vc.active"

            [title]="vc.user.sortName"
            >

            <video [id]="'video_'+vc.ownerId" autoplay='1'
            (play)="onVideoPlay(vc.participantId)"
            (error)="onVideoError(vc.participantId)"></video>
            <audio [id]="'audio_'+vc.ownerId" autoplay='1'
             (play)="onAudioPlay(vc.participantId)"
             (error)="onAudioError(vc.participantId)"></audio>

            <div class="overlay" [id]="vc.participantId">
                <div class="zoom-bar">
                </div>

                <div class="status-bar">
                    <span class="icon voice" [class.active]="!vc.isMuted"></span>
                    <span class="name">
                        {{ vc.user.sortName }}
                    </span>
                    <div class="pull-right">
                        <span class="consuming-time">
                            {{getDurationFmt()}}
                        </span>
                        <span class="number">
                            {{vc.user.silverCoin}}
                        </span>
                        <span class="icon coin"></span>
                    </div>
                </div>
            </div>


        </div>
    </div>


</div>
